<template>
  <view class="container">
    <NavBar 
      title="认领中心" 
      :showBack="true"
    />
    <view class="page-content">
      <view class="search-bar card">
        <input 
          class="input" 
          type="text" 
          v-model="searchKeyword" 
          placeholder="搜索物品名称"
          @input="handleSearch"
        />
      </view>

      <view class="filter-bar">
        <picker 
          mode="selector" 
          :range="categories" 
          @change="handleCategoryChange"
        >
          <view class="filter-item card">
            <text>{{ selectedCategory || '全部分类' }}</text>
            <text class="icon">▼</text>
          </view>
        </picker>
        <picker 
          mode="selector" 
          :range="locations" 
          @change="handleLocationChange"
        >
          <view class="filter-item card">
            <text>{{ selectedLocation || '全部地点' }}</text>
            <text class="icon">▼</text>
          </view>
        </picker>
      </view>

      <view class="item-list">
        <view 
          class="item-card card fade-in" 
          v-for="(item, index) in filteredItems" 
          :key="index"
          @click="handleItemClick(item)"
        >
          <image class="item-image" :src="item.image" mode="aspectFill" />
          <view class="item-info">
            <view class="item-title">{{ item.name }}</view>
            <view class="item-category">{{ item.category }}</view>
            <view class="item-location">
              <text class="icon">📍</text>
              {{ item.location }}
            </view>
            <view class="item-time">
              <text class="icon">⏰</text>
              {{ item.time }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import NavBar from '@/components/NavBar.vue'

interface Item {
  id: string
  name: string
  category: string
  location: string
  time: string
  image: string
}

const searchKeyword = ref('')
const selectedCategory = ref('')
const selectedLocation = ref('')

const categories = ['证件', '钱包', '手机', '钥匙', '其他']
const locations = ['教学楼', '图书馆', '食堂', '宿舍', '操场', '其他']

// 模拟数据
const items = ref<Item[]>([
  {
    id: '1',
    name: '学生证',
    category: '证件',
    location: '教学楼A栋',
    time: '2024-04-08 10:30',
    image: '/static/images/item1.jpg'
  },
  {
    id: '2',
    name: '黑色钱包',
    category: '钱包',
    location: '图书馆',
    time: '2024-04-08 12:15',
    image: '/static/images/item2.jpg'
  },
  {
    id: '3',
    name: 'iPhone 13',
    category: '手机',
    location: '食堂',
    time: '2024-04-08 14:20',
    image: '/static/images/item3.jpg'
  }
])

// 过滤后的物品列表
const filteredItems = computed(() => {
  return items.value.filter(item => {
    const matchKeyword = item.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
    const matchCategory = !selectedCategory.value || item.category === selectedCategory.value
    const matchLocation = !selectedLocation.value || item.location === selectedLocation.value
    return matchKeyword && matchCategory && matchLocation
  })
})

const handleSearch = () => {
  // 可以添加防抖处理
}

const handleCategoryChange = (e: any) => {
  selectedCategory.value = categories[e.detail.value]
}

const handleLocationChange = (e: any) => {
  selectedLocation.value = locations[e.detail.value]
}

const handleItemClick = (item: Item) => {
  uni.navigateTo({
    url: `/pages/item-detail/index?id=${item.id}`
  })
}
</script>

<style lang="scss">
@use '@/uni.scss' as *;

.container {
  min-height: 100vh;
  background-color: $background-color;
  padding-top: 200rpx;
}

.page-content {
  padding: $spacing-sm;
  height: calc(100vh - 200rpx);
  overflow-y: auto;
}

.search-bar {
  margin-bottom: $spacing-base;
  
  .input {
    width: 100%;
    height: 88rpx;
    background-color: $background-color;
    border-radius: $border-radius-lg;
    padding: 0 $spacing-base;
    font-size: $font-size-base;
  }
}

.filter-bar {
  display: flex;
  gap: $spacing-sm;
  margin-bottom: $spacing-base;
  
  .filter-item {
    flex: 1;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 $spacing-base;
    
    .icon {
      color: $text-color-disabled;
    }
  }
}

.item-list {
  display: flex;
  flex-direction: column;
  gap: $spacing-sm;
  
  .item-card {
    display: flex;
    gap: $spacing-base;
    padding: $spacing-base;
    
    .item-image {
      width: 200rpx;
      height: 200rpx;
      border-radius: $border-radius-lg;
    }
    
    .item-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: $spacing-xs;
      
      .item-title {
        font-size: $font-size-base;
        font-weight: 500;
        color: $text-color;
      }
      
      .item-category {
        font-size: $font-size-sm;
        color: $text-color-secondary;
      }
      
      .item-location, .item-time {
        font-size: $font-size-sm;
        color: $text-color-disabled;
        display: flex;
        align-items: center;
        gap: $spacing-xs;
        
        .icon {
          font-size: $font-size-base;
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}
</style> 